<template>
  <!-- 扫码组件  利用密码框切换到英文输入法 -->
  <div id="HtmlInputScan">
    <input :value="value" class="text" placeholder="abc">
    <input :value="value" @input="input" type="password" class="pass">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      default: undefined
    }
  },
  methods: {
    // 实现v-modle的功能
    input(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>
<style lang="scss" scoped>
#HtmlInputScan {
  position: relative;
  .text {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 28px;
    padding: 2px 0px;
    width: 420px;
    border: 0px solid #fffdda;
    ime-mode: disabled;
    background: #fffdda;
    color: red;
    font-family: Consolas, Monaco, monospace;
  }

  .pass {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999999;
    font-size: 28px;
    padding: 2px 0px;
    width: 420px;
    border: 1px solid #fffdda;
    ime-mode: disabled;
    background-color: transparent;
    color: transparent;
    font-family: Consolas, Monaco, monospace;
  }
}
</style>
